<template>
    <div>
        something
        <button class="btn btn-primary" @click="build">创建项目</button>
        <button class="btn btn-primary" @click="list">列出iamges</button>

        <div class="row">
            <div>
                docker 版本:   {{docker_version}}
            </div>
            <div>
                docker 状态 :   {{docker_status}}
            </div>

            <div>
                <input type="text" v-model="cmd"> <button class="btn btn-success" @click="send">send</button>
            </div>
        </div>


        <div class="row">
            <div class="command" style="background: darkslategrey;width: 100%;height: 800px;unicode-bidi: embed;font-family: monospace;white-space: pre;overflow: scroll;font-size: 10px;padding: 20px;">{{printer}}</div>
        </div>
    </div>
</template>

<style scoped>

</style>

<script>

    export default {
        data() {
          return {
              docker_version: '',
              docker_status: '',
              printer: '',
              cmd: ''
          }
        },
        sockets: {
            connect: function() {
                console.log('login docker images socket connected!', this.$socket.id)
                this.$socket.emit('if_exit', {})
                this.$socket.emit('status', {})
            },
            'if_exit'(dt) {
                console.log('if exit?? ',dt)
                this.$message({
                    type: dt.code?'error':'success',
                    message: dt.msg
                })
                this.docker_version = dt.msg
            },
            'status'(dt) {
                this.docker_status = dt.msg
            },
            'exec'(dt) {
                this.printer +=
                        `${this.cmd}
`;
                this.printer +=  dt.msg;
                this.cmd = ''
                $('.command').scrollTop( $('.command')[0].scrollHeight );
            },
            'info'(dt) {
                this.printer += dt.msg;
                $('.command').scrollTop( $('.command')[0].scrollHeight );
            }
        },
        methods: {

            build() {
                console.log('build');
                this.$socket.emit('build-image', {name: 'hihihi'})
            },
            send() {
                console.log('send cmd')
                this.$socket.emit('exec', {
                    cmd: this.cmd
                })
            },
            list() {
                console.log('list');
                this.$socket.emit('list-image', {name: 'wawa'})
            },
            'build-image-info'(dt) {
                console.log(dt);
            }
        }
    }
</script>
